<template>
  <div class="departments-container">
    <el-card class="box-card">
      <!-- tabs 头部 -->
      <el-tabs>
        <el-tab-pane label="组织架构"> </el-tab-pane>
      </el-tabs>
      <!-- 公司 -->
      <div class="row">
        <!-- 头部信息 -->
        <!-- <el-row type="flex" justify="space-between">
          <el-col>
            <i class="el-icon-office-building"></i>
            <span>江苏传智播客教育科技股份有限公司</span>
          </el-col>
          <el-col>
            <div class="box-right">
              <span>负责人</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>查看部门</el-dropdown-item>
                  <el-dropdown-item>删除部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row> -->
        <treetools :item="topInfo" :isTop="true" @show="openDialog"></treetools>
        <hr />
        <!-- 树状信息 -->
        <el-tree :data="newList" default-expand-all>
          <treetools
            type="flex"
            justify="space-between"
            slot-scope="{ data }"
            :item="data"
            style="width: 100%"
            @updateData="refresh"
            @show="openDialog"
          ></treetools>
          <!-- slot-scope: 用来得到数据源，当前行的数据 -->
          <!-- <el-row
            type="flex"
            justify="space-between"
            slot-scope="{ data }"
            style="width: 100%"
          >
            <el-col>
              <i class="el-icon-user-solid"></i>
              <span>{{ data.name }}</span>
            </el-col>
            <el-col>
              <div class="box-right">
                <span>{{ data.manager }}</span>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                    <el-dropdown-item>查看部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row> -->
        </el-tree>
      </div>
    </el-card>
    <!-- 新增部门面板 -->
    <addpanel
      :showDialog="showAdd"
      @hideDiglog="showAdd = false"
      :currentData="currentData"
      @updateClose="updateClose"
      :title="type"
    ></addpanel>
  </div>
</template>

<script>
import { getDepartment } from '@/api/departments'
export default {
  name: 'departments',
  data () {
    return {
      topInfo: {},
      // 组织架构数据
      list: [],
      newList: [], // 保存组织架构树状结构数据
      showAdd: false, // 控制新增面板的显示与隐藏
      currentData: {}, // 保存点击新增子组件时传回的当前父组件的信息
      type: '',   // 判断是新增页面还是编辑页面
    }
  },
  methods: {
    async getDepartmentData () {
      let res = await getDepartment()
      // console.log(res)
      this.list = res.data.data.depts
      // 头部
      this.topInfo = { ...res.data.data.depts[0], manager: '负责人' }
    },
    turnData (list, pid) {
      let arr = []
      list.forEach(item => {
        if (item.pid === pid) {
          // 如果数组中元素的 pid 等于传入的 pid 表示为当前的元素为同一级，则加入新数组中
          let children = this.turnData(this.list, item.id)
          // 判断一级中是否存在子元素，存在加入新属性 children 否则不加
          if (children.length) {
            item.children = children
          }
          arr.push(item)
        }
      })
      this.newList = arr
      // 需将新数组返回出去，否则 children 里没有返回数据，为 undefined
      return arr
    },
    // 打开新增面板(接收子组件通知更新数据)
    openDialog (item) {
      this.showAdd = true 
      this.currentData = item.data
      // console.log(item);
      // 判断是新增还是编辑
      if(item.type == 'add'){
        this.type = '新增部门'
      }else if(item.type == 'edit'){
        this.type = '编辑部门'
      }
    },
    //  更新数据(接收子传父的通知)
    async refresh () {
      await this.getDepartmentData()
      this.turnData(this.list, '')
    },
    // 点击确定后关闭面板，更新数据
    async updateClose () {
      await this.getDepartmentData()
      this.turnData(this.list, '')
      this.showAdd = false
    }
  },
  async created () {
    await this.getDepartmentData()
    this.turnData(this.list, '')
  },
  // 导入子组件
  components: {
    treetools: () => import('@/views/departments/components/tree-tools.vue'),
    addpanel: () => import('@/views/departments/components/addpanel.vue')
  }
}
</script>

<style lang="scss" scoped>
.departments-container {
  margin: 20px;

  .el-tabs {
    margin: 20px;
  }
  .row {
    margin: 20px;
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    /* i {
      margin-right: 6px;
      vertical-align: middle;
      font-weight: 700;
    }
    span {
      font-weight: 700;
      font-size: 14px;
    }
    .box-right {
      text-align: right;
      span {
        font-weight: normal;
      }
      .el-dropdown {
        margin-left: 30px;
        cursor: pointer;
      }
    } */
  }
}
</style>
